<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>个人信息</title>
    <meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no' name='viewport'/>
    <link rel="icon" href="../manager/static/images/logo.jpg" type="image/x-icon"/>

    <script src="../manager/static/js/webfont.min.js"></script>
    <script>
        WebFont.load({
            google: {"families": ["Lato:300,400,700,900"]},
            custom: {
                "families": ["Flaticon", "Font Awesome 5 Solid", "Font Awesome 5 Regular", "Font Awesome 5 Brands", "simple-line-icons"],
                urls: ['../manager/static/css/fonts.min.css']
            },
            active: function () {
                sessionStorage.fonts = true;
            }
        });
    </script>
    <link rel="stylesheet" href="../manager/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="../manager/static/css/atlantis.min.css">
    <link rel="stylesheet" href="../manager/static/css/sweetalert.css">
</head>
<body data-background-color="dark">
<div class="wrapper">
    <!-- 顶部导航栏 -->
    <div class="main-header">
        <div class="logo-header" data-background-color="dark2">
            <a href="http://localhost:88/city-info/" class="logo">
                <img src="../manager/static/images/logo.jpg" alt="navbar brand" class="navbar-brand"
                     style="width: 50px;height: 50px;">
                <label class="text-white">后台管理系统</label>
            </a>
            <button class="navbar-toggler sidenav-toggler ml-auto" type="button" data-toggle="collapse"
                    data-target="collapse" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon">
						<i class="icon-menu"></i>
					</span>
            </button>
            <button class="topbar-toggler more"><i class="icon-options-vertical"></i></button>
            <div class="nav-toggle">
                <button class="btn btn-toggle toggle-sidebar">
                    <i class="icon-menu"></i>
                </button>
            </div>
        </div>

        <nav class="navbar navbar-header navbar-expand-lg" data-background-color="dark">
            <div class="container-fluid">
                <ul class="navbar-nav topbar-nav ml-md-auto align-items-center">
                    <li class="nav-item dropdown hidden-caret">
                        <a class="dropdown-toggle profile-pic" data-toggle="dropdown" href="#" aria-expanded="false">
                            <div class="avatar-sm">
                                <img th:src="${session.member.avatar}" alt="..."
                                     class="avatar-img rounded-circle">
                            </div>
                        </a>
                        <ul class="dropdown-menu dropdown-user animated fadeIn">
                            <div class="dropdown-user-scroll scrollbar-outer">
                                <div class="user-box">
                                    <div class="avatar-lg"><img th:src="${session.member.avatar}"
                                                                alt="image profile" class="avatar-img rounded">
                                    </div>
                                    <div class="u-text">
                                        <h4 th:text="${session.member.name}"></h4>
                                        <p class="text-muted" th:text="${session.member.email}"></p>
                                    </div>
                                </div>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="/city-manager/memberInfo">账户设置</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="/city-manager/logout">注销</a>
                            </div>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
    <!-- 顶部导航栏end -->

    <!-- 侧边导航栏 -->
    <div class="sidebar sidebar-style-2" data-background-color="dark2">
        <div class="sidebar-wrapper scrollbar scrollbar-inner">
            <div class="sidebar-content">
                <ul class="nav nav-primary">
                    <li class="nav-item active">
                        <a href="index" class="collapsed" aria-expanded="false">
                            <i class="fas fa-home"></i>
                            <p>主页</p>
                        </a>
                    </li>
                    <li class="nav-section">
                        <h4 class="text-section">
                            功能列表
                        </h4>
                    </li>
                    <li class="nav-item" th:each="firstMenu:${firstMenus}">
                        <a data-toggle="collapse" th:href="@{'#'+${firstMenu.menuUrl}}">
                            <i class="" th:classappend="${firstMenu.icon}"></i>
                            <p th:text="${firstMenu.menuName}"></p>
                            <span class="caret"></span>
                        </a>
                        <div class="collapse" th:id="${firstMenu.menuUrl}">
                            <ul class="nav nav-collapse">
                                <li th:each="secondMenu:${secondMenus}"
                                    th:if="${secondMenu.parentId} eq ${firstMenu.menuId}">
                                    <a th:href="@{${secondMenu.menuUrl}}">
                                        <span class="sub-item" th:text="${secondMenu.menuName}"></span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="mx-4 mt-2">
                        <a href="https://github.com/lycGlish/CloudCity" class="btn btn-primary btn-block"><span
                                class="btn-label mr-2"> <i class="fa fa-heart"></i> </span>加入我们</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 侧面导航end -->

    <!-- 主界面 -->
    <div class="main-panel">
        <div class="content">
            <div class="page-inner">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <div class="card-title">个人信息</div>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6 col-lg-4">
                                        <form>
                                            <!-- 用户id -->
                                            <input type="text" id="id" name="id" style="display:none"
                                                   th:value="${session.member.id}">
                                            <!-- 图片url -->
                                            <input type="text" id="avatar" name="avatar" style="display:none"
                                                   th:value="${session.member.avatar}">

                                            <!-- 展示列表 -->
                                            <div class="form-group">
                                                <label class="control-label">
                                                    手机号
                                                </label>
                                                <p class="form-control-static" th:text="${session.member.phone}"></p>
                                            </div>
                                            <div class="form-group">
                                                <label for="name">用户名</label>
                                                <input type="text" class="form-control" id="name"
                                                       name="name" th:value="${session.member.name}">
                                            </div>
                                            <div class="form-group">
                                                <label for="email">邮箱</label>
                                                <input type="email" class="form-control" id="email"
                                                       name="email" th:value="${session.member.email}">
                                            </div>
                                        </form>
                                    </div>
                                    <div class="col-md-6 col-lg-4">
                                        <form id="formTag" method="post" enctype="multipart/form-data">
                                            <div class="form-group">
                                                <label for="multipartFile">头像</label>
                                                <input type="file" name="multipartFile" id="multipartFile"
                                                       onchange="uploadImg()">
                                                <small id="avatarHint" class="form-text text-muted">
                                                    图片大小不超过10MB</small>
                                            </div>
                                            <img th:src="${session.member.avatar}" id="img"
                                                 style="width:200px;height:200px;margin: 10px 100px 0 0" alt="">
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <div class="card-action">
                                <button class="btn btn-success" onclick="updateMemberInfo()">修改资料</button>
                                <button class="btn btn-danger" onclick="showModel()">重置密码</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 主界面end -->

    <!-- 重置密码modal -->
    <div class="modal fade" id="resetModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header no-bd">
                    <h5 class="modal-title">
                        <span class="fw-mediumbold">重</span>
                        <span class="fw-light">置</span>
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group form-group-default">
                                    <p class="small">新密码</p>
                                    <input id="password" type="password" class="form-control">
                                </div>
                            </div>
                        </div>
                        <button type="button" id="editButton" class="btn btn-primary" style="margin: 0 0 0 300px;"
                                onclick="resetPassword();">重置
                        </button>
                        <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- 修改end -->
</div>
<script src="../manager/static/js/jquery.3.2.1.min.js"></script>
<script src="../manager/static/js/popper.min.js"></script>
<script src="../manager/static/js/bootstrap.min.js"></script>
<script src="../manager/static/js/atlantis.min.js"></script>
<script src="../manager/static/js/plugin/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<script src="../manager/static/js/plugin/jquery-ui-touch-punch/jquery.ui.touch-punch.min.js"></script>
<script src="../manager/static/js/plugin/jquery-scrollbar/jquery.scrollbar.min.js"></script>
<script src="../manager/static/js/plugin/chart.js/chart.min.js"></script>
<script src="../manager/static/js/plugin/jquery-sparkLine/jquery.sparkLine.min.js"></script>
<script src="../manager/static/js/plugin/chart-circle/circles.min.js"></script>
<script src="../manager/static/js/plugin/dataTables/dataTables.min.js"></script>
<script src="../manager/static/js/plugin/bootstrap-notify/bootstrap-notify.min.js"></script>
<script src="../manager/static/js/plugin/sweetAlert/sweetAlert.min.js"></script>
<script src="../manager/static/js/member/memberInfo.js"></script>
</body>
</html>